<template>
  <div class="list-wrap">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <MovieList
          v-for="list in movieList"
          :key="list.id"
          :list="list"
        ></MovieList>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from 'vue'
import { PullRefresh, List } from 'vant'
import querystring from 'querystring'

Vue.use(PullRefresh).use(List)

import { get, post } from '@u/http.js'
import MovieList from '@c/movielist/MovieList'

export default {
  components: {
    MovieList
  },

  data() {
    return {
      movieList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },

  methods: {
    async loadData() {
      let result = await get({
        url: `/api/mmdb/movie/v2/list/hot.json`,
        params: {
          limit: this.limit,
          offset: this.offset,
          ct: this.$store.state.city
        }
      })

      // 重新装填数组
      this.movieList = [
        ...this.movieList,
        ...result.data.data.hot
      ]

      // 记录总条数
      this.total = result.data.data.total


      // let result2 = await post({
      //   url: '/shihuo/zhuangbei/getHomeNews',
      //   data: JSON.stringify({
      //     page: 1
      //   })
      // })

      // console.log(result2)
    },

    async onRefresh() {
      this.offset = 0
      this.movieList = []
      await this.loadData()
      this.isLoading = false

      // 让页码的起始点到下一页
      this.offset += this.limit
    },

    async onLoad() {
      await this.loadData()

      // 使loading图标消失
      this.loading = false

      // 让起始点offset累加，加载下一页
      this.offset += this.limit

      if (this.movieList.length === this.total) {
        this.finished = true
      }
    }
  },

  created() {
    this.limit = 10
    this.offset = 0
    this.total = 0
  },

  async mounted() {
    // this.loadData()
  },
}
</script>

<style lang='stylus' scoped>
.list-wrap
  overflow-y scroll
  position absolute
  width 100%
  height 100%
  margin-top .44rem
  .van-list
    padding-bottom .44rem
</style>